<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Zen-Coding</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        html,body{
            overflow: hidden;
        }
        #zen, #prettify{
            float: left;
            display: block;
            text-indent: 0;
            font: normal 14px/20px "microsoft yahei";
            padding: 0;
        }
        #zen{
            width: 100%;
            background: transparent;
            resize: none;
            color: #fff;
        }
        #zen:focus{
            outline: none;
        }
        #prettify{
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            z-index: -1;
            overflow: scroll;
            *margin-top: 1px;
        }
        .btn-submit{
            position: absolute;
            right: 30px;
            top: 10px;
            width: 80px;
            font: bold 16px/24px "microsoft yahei";
            cursor: pointer;
        }
    </style>
    <!--[if gt IE 8]>
    <style type="text/css">
        #prettify{margin-top: -1px;}
    </style>
    <![endif]-->

    <link rel="stylesheet" href="../css/prettify.css">
    <script type="text/javascript" src="../js/prettify.min.js?handle=false"></script>
    <script type="text/javascript" src="../js/zen_textarea.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        var onresize = function(){
            var o = {
                width : document.body.offsetWidth,
                height: window.innerHeight || 720
            };
            $("#prettify").css(o);
            $("#zen").css(o);
        };
    </script>
</head>
<body onresize="onresize();" onload="onresize();">
<pre id="prettify" class="prettyprint linenums:1"></pre>
<form action="zencoding.html" target="_blank" method="post">
    <textarea name="zen" id="zen" class="zc-use_tab-true"></textarea>
    <label for="zen" ><input class="btn-submit" type="submit" value="保存"/></label>
</form>


<script type="text/javascript">
    $(function(){
        var zen = $("#zen"), pre = $("#prettify");
        zen.on("keyup propertychange",function(){
            $("#prettify").text( $(this).val() );
            prettyPrint();
        }).focus();
        zen.on("mouseup keyup",function(){
            var _this = this;
            setTimeout(function(){
                var text = "";
                if (document.selection) {
                    var sel = document.selection.createRange();
                    text = sel.text;
                }else{
                    if( _this.selectionStart != _this.selectionEnd){
                        text = _this.value.substring(_this.selectionStart , _this.selectionEnd);
                    }
                }
                zen.fadeTo(0,( text ? 1 : 0.2 ) );
                pre.css( { textIndent: ( text ? "-999em" : "0" ) } )
            },0);
        }).on("scroll",function(){
            pre.scrollTop( $(this).scrollTop() );
        });
    });
</script>

</body>
</html>
<%
    return function(){
        if(request.post){
            response.writeHead(200, {"Content-Type": "application/octet-stream"});
            response.end(  request.post.zen.replace(/\+/g," ") );
        }else{
            response.end( __p );
        }
    };
%>
